import { defineComponent, watch, ref } from 'vue';
// 声明类型
const PropsType = {
    cdata: {
        type: Object,
        require: true
    }
} as const

// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props) {
        // 定义 ref
        const chartRef = ref()
        // 定义颜色
        // const colorList = {
        //     linearYtoG: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 1,
        //         y2: 1,
        //         colorStops: [
        //             {
        //                 offset: 0,
        //                 color: "#f5b44d"
        //             },
        //             {
        //                 offset: 1,
        //                 color: "#28f8de"
        //             }
        //         ]
        //     },
        //     linearGtoB: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 1,
        //         y2: 0,
        //         colorStops: [
        //             {
        //                 offset: 0,
        //                 color: "#43dfa2"
        //             },
        //             {
        //                 offset: 1,
        //                 color: "#28f8de"
        //             }
        //         ]
        //     },
        //     linearBtoG: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 1,
        //         y2: 0,
        //         colorStops: [
        //             {
        //                 offset: 0,
        //                 color: "#1c98e8"
        //             },
        //             {
        //                 offset: 1,
        //                 color: "#28f8de"
        //             }
        //         ]
        //     },
        //     areaBtoG: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 0,
        //         y2: 1,
        //         colorStops: [
        //             {
        //                 offset: 0,
        //                 color: "rgba(35,184,210,.2)"
        //             },
        //             {
        //                 offset: 1,
        //                 color: "rgba(35,184,210,0)"
        //             }
        //         ]
        //     }
        // }
        // 配置项
        let options = {}

        // 监听
        watch(
            () => props.cdata,
            (val: any) => {
                console.log("接收到的数据",val)
                options = {
                    title: {
                        text: '气象环境数据监测'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['光照强度', '风力','湿度']
                    },
                    grid: {
                        left: '3%',
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: val.hours
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '光照强度',
                            axisLabel: {
                                formatter: '{value} Lux'
                            }
                        },
                        {
                            type: 'value',
                            name: '风力',
                            axisLabel: {
                                formatter: '{value} m/s'
                            },
                            position: 'left',
                            offset: 60
                        },
                        // {
                        //     type: 'value',
                        //     name: '温度',
                        //     min: 10,
                        //     max: 40,
                        //     interval: 5,
                        //     axisLabel: {
                        //         formatter: '{value} °C'
                        //     },
                        //     position: 'right',
                        //     offset: 40
                        // },
                        {
                            type: 'value',
                            name: '湿度',
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            position: 'right',
                            offset: 10
                        },
                    ],
                    series: [
                        {
                            name: '光照强度',
                            type: 'line',
                            yAxisIndex: 0,
                            data: val.light,
                            symbol: 'circle', // 指定为实心圆形
                            // lineStyle: { color: '#b8860b' }, // 暗金色（低饱和黄）
                            // itemStyle: { color: '#b8860b' },
                        },
                        {
                            name: '风力',
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'circle', // 指定为实心圆形
                            data: val.wind
                        },
                        // {
                        //     name: '温度',
                        //     type: 'line',
                        //     yAxisIndex: 2,
                        //     symbol: 'circle', // 指定为实心圆形
                        //     data: val.temperature
                        // },
                        {
                            name: '湿度',
                            type: 'line',
                            yAxisIndex: 2,
                            symbol: 'circle', // 指定为实心圆形
                            data: val.humidity
                        },
                    ]
                };
                // 手动触发更新
                if (chartRef.value) {
                    // 通过初始化参数打入数据
                    chartRef.value.initChart(options)
                }
            },
            {
                immediate: true,
                deep: true
            }
        )

        return () => {
            const height = "300px"
            const width = "100%"

            return <div>
                <echart ref={chartRef} options={options} height={height} width={width} />
            </div>
        }
    }
})

